<template>
  <div class="drawer-menu">
    <MenuMyself></MenuMyself>
    <div class="menu">
      <span
        v-for="(item, index) in menu.item"
        :key="index"
        @click="to(item.path)"
      >
        {{ item.name }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import MenuMyself from '@/components/MenuMyself.vue';
import { getCurrentInstance, onMounted, reactive, watch } from 'vue';
import useLanguageStore from '@/store/modules/language.store.ts';
import { useRouter } from 'vue-router';
import useOpenMenuStore from '@/store/modules/openMenu.store.ts';

const router = useRouter();

const { $t } = getCurrentInstance()?.proxy as any;

interface Menu {
  name: any;
  path: string;
}

const menu = reactive({
  item: [] as Menu[]
});

onMounted(() => {
  setMenu();
});

watch(
  () => useLanguageStore().language,
  () => {
    setMenu();
  }
);

function setMenu() {
  menu.item = [
    { name: $t('nav.index'), path: '/' },
    { name: $t('nav.talk'), path: '/talk' },
    { name: $t('nav.about'), path: '' },
    { name: $t('nav.archive'), path: '' },
    { name: $t('nav.tags'), path: '' },
    { name: $t('nav.message'), path: '' },
    { name: $t('nav.friend'), path: '' },
    { name: $t('nav.album'), path: '' }
  ] as Menu[];
}

function to(path: string) {
  router.push(path);
  useOpenMenuStore().setMenuStatus(false);
}
</script>

<style scoped lang="less">
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-menu {
  width: 300px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: slide-down 0.3s ease-in-out;
  overflow-y: auto;

  .menu {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-bottom: 20px;

    span {
      margin: 10px 0 10px 0;
      color: var(--font-color);
      cursor: pointer;
    }
  }
}
</style>
